<%--
  Created by IntelliJ IDEA.
  User: 张庆昇
  Date: 2019/12/30
  Time: 16:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>首页</title>


    <style>
        #zly{
            width: 50px;
            height: 50px;

            /* 设置边框为圆形 */
            border-radius: 50%;
        }
        #lunbo{
            margin-top: -20px;
        }
        #font-color{
            color: white;
            background-color:rgb(34, 33, 33);

        }
        #log-ss{
            top:0px;
            width: 0%;
        }
        #BS a:hover{
            color: red;
        }
        .navbar {
            position: relative;
            min-height: 50px;
            margin-bottom:0px;
            border: 1px solid transparent;
        }
    </style>

</head>
<body>
<!-- 导航begin -->
<%@ include file="../common/nav.jsp" %>
<!-- 轮播 begin -->
<div class="container-fluid" id="lunbo">
    <div class="row">
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="${path}/imgs/lunbo1.jpg" alt="First slide">
                </div>
                <div class="item">
                    <img src="${path}/imgs/lunbo2.jpg" alt="Second slide">
                </div>
                <div class="item">
                    <img src="${path}/imgs/lunbo3.jpg" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next"><span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
    </div>
</div>
<!-- 轮播end -->
<div class="container-fluid">
    <div class="row">
        <h1  style="font-size: 20px;  margin-left: 50px;">小米手机</h1>
        <c:forEach items="${phones}" var="b">
            <div class="col-sm-4 col-md-4">
                <div class="thumbnail" style="border: 0px;">
                    <a href="${path}/Detailed"><img src="${path}/imgs/${b.imgUrl}"
                                            alt="通用的占位符缩略图"></a>
                    <div class="caption" >
                        <p style="font-size: 20px; color:red;text-align: center;">￥${b.price}.00</p><br>
                        <p style="font-size: 20px; text-align:center;">${b.phoneName}</p>
                    </div>
                </div>
            </div>
        </c:forEach>

    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <h1  style="font-size: 20px;  margin-left: 50px;">华为手机</h1>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail" style="border: 0px;">
                <a href="#"><img src="${path}/imgs/HUAWEI nova 6 SE.jpg" id="ez-size"
                                        alt="通用的占位符缩略图"></a>
                <div class="caption" >
                    <p style="font-size: 20px; color:red;text-align: center;">￥2199.00</p><br>
                    <p style="font-size: 20px; text-align:center;">HUAWEI nova 6 SE</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail" style="border: 0px;">
                <a href="#"><img src="${path}/imgs/HUAWEI Mate 30 Pro 5G.jpg"
                                 alt="通用的占位符缩略图"></a>
                <div class="caption">
                    <p style="font-size: 20px; color:red;text-align: center;">￥6899.00</p><br>
                    <p style="font-size: 20px; text-align:center;">HUAWEI Mate 30 Pro 5G</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail" style="border: 0px;">
                <a href="#"><img src="${path}/imgs/HUAWEI nova 5 Pro.jpg"
                                 alt="通用的占位符缩略图"></a>
                <div class="caption">
                    <p style="font-size: 20px; color:red; text-align: center;">￥2499.00</p><br>
                    <p style="font-size: 20px; text-align:center;">HUAWEI nova 5 Pro</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail" style="border: 0px;">
                <a href="#"><img src="${path}/imgs/honorV30 5G.jpg"
                                 alt="通用的占位符缩略图"></a>
                <div class="caption">
                    <p style="font-size: 20px; color:red;text-align: center;">￥3299.00</p><br>
                    <p style="font-size: 20px; text-align:center;">honorV30 5G</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail" style="border: 0px;">
                <a href="#"><img src="${path}/imgs/HUAWEI p30pro.jpg"
                                 alt="通用的占位符缩略图"></a>
                <div class="caption">
                    <p style="font-size: 20px; color:red;text-align: center;">￥4488.00</p><br>
                    <p style="font-size: 20px; text-align:center;">HUAWEI p30pro</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail" style="border: 0px;">
                <a href="#"><img src="${path}/imgs/HUAWEImate20 RS.jpg"
                                 alt="通用的占位符缩略图"></a>
                <div class="caption">
                    <p style="font-size: 20px; color:red;text-align: center;">￥12999.00</p><br>
                    <p style="font-size: 20px; text-align:center;">HUAWEImate20 RS</p>
                </div>
            </div>
        </div>
    </div>
</div>

<%@ include file="../common/footer.jsp" %>

<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

<script>
    $('#myCarousel').carousel({
        interval: 2000
    })
</script>


</body>
</html>
